<template>
	<div class="add">
		<div>
			<router-link to="/bookbackend/endbacklist"><i class="el-icon-back"></i></router-link>

			<div class="add1">
				<el-form label-width="80px">
					<el-form-item label="类型:">
						<el-input v-model="type" type="number" placeholder="1=轮播 2=广告"></el-input>
					</el-form-item>
					<el-form-item label="优先级:">
						<el-input v-model="hot" type="number" placeholder="数字越大,显示越前"></el-input>
					</el-form-item>
					<el-form-item label="描述:">
						<el-input v-model="meno" type="textarea" style="width: 30%;"></el-input>
					</el-form-item>
				</el-form>

			</div>
			<div class="add2">
				<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
					:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
					action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
					<h4>选择头像图片</h4>
				</el-upload>

				<div style="display: flex; flex-direction: column; justify-content:end;" v-loading="loading">
					<el-button type="primary" @click="add()">保存</el-button>

				</div>
			</div>
		</div>

		<img :src="`${$ip}/api/public/showimg/${img}`" min-width="70" height="70" />

	</div>
</template>

<script>
	export default {
		name: 'endAddAndUpdate',
		data() {
			return {
				fileList: [],
				loading: false,

				type: 0,
				hot: 0,
				meno: '',
				img: '',
				id: 0
			}
		},

		methods: {
			handleChange: function(file, fileList) {
				this.fileList = fileList;
			},

			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;

				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			add() {
				this.id = this.$route.query.id;
				let formData = new FormData();

				formData.append("id", this.id);
				formData.append("pic", this.fileList[0].raw);
				formData.append("type", this.type);
				formData.append("memo", this.meno);
				formData.append("hot", this.hot);
				console.log(formData);
				this.$postf("/api/adm/hot/add", formData).then((resp) => {

				})
			}
		},
		mounted() {
			console.log("打印数组" + this.fileList);
			let id = this.$route.query.id;
			console.log("传过来的id" + id);

			this.$get("/api/adm/hot/findById/" + id).then((resp) => {
				console.log(resp.data.data);
				this.type = resp.data.data.type;
				this.meno = resp.data.data.memo;
				this.hot = resp.data.data.hot;
				this.img = resp.data.data.picture
			})
		}

	}
</script>

<style>
	.add {
		width: 100%;

	}

	.add h3 {
		text-align: center;
	}

	.add img {
		width: 250px;
		height: 200px;
		position: relative;
		left: 50%;
		top: -35%;
	}

	.add1 {
		margin-top: 3%;
		margin-left: 5%;
	}

	.add1 input {
		width: 30%;


	}

	.add2 button {
		width: 10%;
		margin-left: 10%;
	}

	.add2 h2 {
		margin-left: 5%;
	}

	.avatar-uploader {
		margin-left: 10%;
	}

	.add2 .el-upload-list--picture .el-upload-list__item {
		width: 300px;
		margin: 0 auto;

	}
</style>